<template>
	<view class="container">
		<view class="header">
			<headerTab :tabs="tabs" :currentTab="currentTab" @clickItem="clickItem"></headerTab>
			<headerTab :tabs="gradeList" class="gradeTabClass" :currentTab="gradeTab" @clickItem="gradeclickItem"></headerTab>
			<headerTab :tabs="skillList" class="skillTabClass" :currentTab="skillTab" @clickItem="skillclickItem"></headerTab>
		</view>
		<view class="list-body">
			<newList
			:list="list"
			imgField="img"
			titleField="title"
			tipsField="tipsHtml"
			numField="studies"
			@handleClick="goItem"
			></newList>
		</view>
	</view>
</template>

<script>
	import headerTab from "../../components/header_tab/index.vue";
	import newList  from "../../components/new_list/index.vue";
	import {getCourseList}  from "../../static/js/api/course.js";
	export default{
		components:{
			headerTab,
			newList
		},
		data(){
			return{
				list:[], 
				currentTab:0,
				gradeTab:0,
				skillTab:0,
				tabs: [],
				gradeList:[],
				skillList:[],
				courseslist:[],
				typeId:["256","172","241","222"],
			}
		},
		onLoad(option) {
			if(option.typeId){
				this.typeId.forEach((item,index)=>{
					if(option.typeId==item){
						this.currentTab = index
					}
				})
			}else{
				this.currentTab = 0
			}
			this.getData(this.typeId[this.currentTab])
		},
		methods:{
			clickItem(index){
				this.currentTab = index
				this.gradeTab = 0
				this.skillTab = 0
				this.gradeList = this.tabs[index].childlist
				this.skillList = this.gradeList[this.gradeTab].childlist
				this.getData(this.skillList[this.skillTab].id)
			},
			gradeclickItem(index){
				this.gradeTab = index
				this.skillTab = 0
				this.skillList = this.gradeList[this.gradeTab].childlist
				this.getData(this.skillList[this.skillTab].id)
			},
			skillclickItem(index){
				this.skillTab = index
				this.getData(this.skillList[this.skillTab].id)
			},
			goItem(item){
				uni.navigateTo({
					url:"/pages/basicCourse/course?courseInfo="+JSON.stringify(item)
				})
			},
			getData(id){
				let _this = this
				getCourseList({
					category_id:id,
				}).then(res=>{
					// console.log(res)
					if(res){
						_this.tabs = res.categories
						_this.list = res.courses
						if(_this.tabs.length>0){
							_this.gradeList = _this.tabs[_this.currentTab].childlist
							if(_this.gradeList.length>0){
								_this.skillList = _this.gradeList[_this.gradeTab].childlist
								if(this.list&&this.skillList.length>0){
									this.list.forEach(item=>{
										item.tipsHtml = "类型 "+item.category_name
									})
								}
							}
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.gradeTabClass{
		margin-bottom: 1px;
	}
	.gradeTabClass /deep/ .menu-topic-text-active,
	.gradeTabClass /deep/ .menu-topic-text,
	.skillTabClass /deep/ .menu-topic-text-active,
	.skillTabClass /deep/ .menu-topic-text{
		font-size:28rpx!important;
	}
	.list-body{
		background-color: #fff;
	}
</style>